<template>
  <div class="_pagination" v-show="visible && total>0">
    <div class="page_total">
      <span>共{{total}}条记录 </span>
      <!-- <span v-if="Math.ceil(total / size) > 1 ">第{{page}} / {{Math.ceil(total / size) || 1}}页  </span> -->
    </div>
    <a-pagination
      :showSizeChanger="showSizeChanger"
      :showQuickJumper="showQuickJumper"
      :pageSize.sync="currentSize"
      @change="onPageSizeChange"
      @showSizeChange="onShowSizeChange"
      :pageSizeOptions="pageSizeOptions"
      :total="total"
      v-model="currentPage"
      v-bind="$attrs"
      :size="tableSize"
    ></a-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      }
    },
    currentSize: {
      get() {
        return this.size;
      },
      set(val) {
        this.$emit("update:size", val);
      }
    }
  },
  props: {
    // middle, small
    tableSize: {
      type: String,
      default: "default"
    },
    visible: {
      type: Boolean,
      default: true
    },
    showSizeChanger: {
      type: Boolean,
      default: true
    },
    showQuickJumper: {
      type: Boolean,
      default: false
    },
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 50
    },
    pageSizeOptions: {
      type: Array,
      default: () => ["20", "50", "100", "500", "1000"]
    },
    onPageSizeChange: {
      type: Function,
      default: () => {}
    },
    onShowSizeChange: {
      type: Function,
      default: () => {}
    }
  }
};
</script>

<style lang="less" scoped>
._pagination {
  margin-top: 24px;
  height: 32px;
  display: flex;
  align-content: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  .page_total{
    margin-right: 10px;
    line-height: 32px;
  }
  > span {
    // margin-left: 23px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;
  }
}
</style>